<template>
  <footer class="bg-[#0e1116] py-16 text-white">
    <section class="flex justify-center md:px-6">
      <!--
        在768px 及一下，为单行
        在768px - 1024px 之间，为两行2列
        在1024px 及以上，为1行4列， 最后一列为330px
      -->
      <div
        class="grid w-full grid-cols-1 gap-4 border-b border-white/20 pb-5 text-center md:max-w-6xl md:grid-cols-2 md:text-left lg:grid-cols-[1fr,1fr,1fr,330px]"
      >
        <div
          class="item-1 footer-item-1 order-last flex flex-col items-center justify-center text-center md:items-start lg:items-center"
        >
          <!-- 这里包一次，是因为上面的响应式布局控制了 align-items的 对齐方式， 如果不包一层，则这里的logo 会靠近最左边，不协调 -->
          <div class="flex flex-col items-center">
            <div class="w-[70px]">
              <siteLogo></siteLogo>
            </div>
            <div class="flex items-center">
              <div class="my-2">Leonardo</div>
              <div class="ai-text">.Ai</div>
            </div>
            <div class="text-sm text-gray-400">
              <div>Leonardo Interactive Pty Ltd</div>
              <div>ABN: 56 662 209 485</div>
            </div>
          </div>
        </div>
        <div class="item-2">
          <div class="mb-4 text-xl">About</div>
          <nav>
            <ul class="flex flex-col gap-4">
              <li class="w-full" v-for="(item, index) in aboutList" :key="index">
                <a class="block w-full text-gray-400 hover:text-white" href="#">{{ item.text }}</a>
              </li>
            </ul>
          </nav>
        </div>

        <div class="item-3">
          <div class="mb-4 text-xl">Stay tuned!</div>
          <nav>
            <ul class="flex flex-col gap-4">
              <li class="w-full" v-for="(item, index) in stayList" :key="index">
                <a class="block w-full text-gray-400 hover:text-white" href="#">{{ item.text }}</a>
              </li>
            </ul>
          </nav>
        </div>

        <!-- 下载app -->
        <div class="item-4">
          <div class="mb-4 text-xl">Get the App</div>
          <div class="mb-4 flex justify-center md:justify-start">
            <appStore></appStore>
          </div>
          <div class="flex justify-center md:justify-start">
            <googlePlay></googlePlay>
          </div>
        </div>
      </div>
    </section>

    <section class="flex justify-center px-4 pt-5 text-sm text-gray-400">
      <div class="policy-list flex flex-wrap gap-y-4 md:max-w-6xl md:gap-4">
        <div class="w-1/2 md:w-auto">Legal Notice</div>
        <div class="w-1/2 md:w-auto">DMCA</div>
        <div class="w-1/2 md:w-auto">Terms of Service</div>
        <div class="w-1/2 md:w-auto">Cookie Policy</div>
      </div>
    </section>
  </footer>
</template>

<script setup>
import siteLogo from '~/assets/images/svg/site-logo.vue'
import appStore from '~/assets/images/svg/app-store.vue'
import googlePlay from '~/assets/images/svg/google-play.vue'
const aboutList = ref([
  {
    text: 'API',
    url: ''
  },
  {
    text: 'FAQ',
    url: ''
  },
  {
    text: 'Blog',
    url: ''
  },
  {
    text: 'Support',
    url: ''
  },

  {
    text: 'Contactus',
    url: ''
  },

  {
    text: 'Careers',
    url: ''
  },

  {
    text: 'Affiliate Program',
    url: ''
  },
  {
    text: 'Leonardo Creator Program',
    url: ''
  }
])

const stayList = ref([
  {
    text: 'Discord',
    url: ''
  },

  {
    text: 'Facebook',
    url: ''
  },

  {
    text: 'Linkedin',
    url: ''
  },

  {
    text: 'X(Twitter)',
    url: ''
  },
  {
    text: 'YouTube',
    url: ''
  },
  {
    text: 'Fanbook',
    url: ''
  }
])
</script>

<style lang="scss" scoped>
.ai-text {
  background-color: #7857ff;
  background-image: linear-gradient(81.02deg, #fa5560 -23.47%, #b14bf4 45.52%, #4d91ff 114.8%);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.policy-list {
  div {
    text-align: center;
    padding-left: 18px;
    padding-right: 18px;
  }

  div:last-child {
    border-right: none;
  }
}

@media screen and (min-width: 768px) {
  .footer-item-1 {
    grid-area: 2/1/3/2;
  }
  .policy-list {
    div {
      border-right: 1px solid #4d4d4d;
    }
  }
}

@media screen and (min-width: 1024px) {
  .footer-item-1 {
    grid-area: 1/1/1/1;
  }
}
</style>
